<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link href="style.css" rel="stylesheet" />
    <title>The Basic language of the web: HTML</title>
  </head>

  <body>
    <div class="container">
      <header class="main-header clearfix">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="flexbox.html">Flexbox</a>
          <a href="css-grid.html">CSS Grid</a>
        </nav>
      </header>

      <!-- <div class="row"> -->
      <article>
        <header class="post-header">
          <h2>The Basic Language of the Web: HTML</h2>

          <div class="author-box">
            <img
              src="img/laura-jones.jpg"
              alt="Headshot of Laura Jones"
              width="50"
              height="50"
              class="author-img"
            />
            <p id="author" class="author">
              Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
            </p>
          </div>

          <img
            src="img/post-img.jpg"
            alt="HTML code on a screen"
            width="500"
            height="200"
            class="post-img"
          />
          <button>💖 Like</button>
        </header>

        <article class="post-article">
          <p>
            All modern websites and web applications are built using three
            <em>fundamental</em> technologies: HTML, CSS and JavaScript. These
            are the languages of the web.
          </p>

          <p>
            In this post, let's focus on HTML. We will learn what HTML is all
            about, and why you too should learn it.
          </p>

          <h3>What is HTML?</h3>

          <p>
            HTML stands for <strong>H</strong>yper<strong>T</strong>ext
            <strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
            language that web developers use to structure and describe the
            content of a webpage (not a programming language). HTML consists of
            elements that describe different types of content: paragraphs,
            links, headings, images, video, etc. Web browsers understand HTML
            and render HTML code as websites.
          </p>

          <p>
            HTML consists of elements that describe different types of content:
            paragraphs, links, headings, images, video, etc. Web browsers
            understand HTML and render HTML code as websites.
          </p>

          <p>In HTML, each element is made up of 3 parts:</p>

          <ol>
            <li>The opening tag</li>
            <li>The closing tag</li>
            <li>The actual element</li>
          </ol>

          <p>
            You can learn more at
            <a href="https://bilibili.com" target="_blank">bilibili.</a>
          </p>

          <h3>Why should you learn HTML?</h3>

          <p>
            There are countless reasons for learning the fundamental language of
            the web. Here are 5 of them:
          </p>

          <ul>
            <li>To be able to use the fundamental web dev language</li>
            <li>
              To hand-craft beautiful websites instead of relying on tools like
              Worpress or Wix
            </li>
            <li>To build web applications</li>
            <li>To impress friends</li>
            <li>To have fun 😃</li>
          </ul>

          <p>Hopefully you learned something new here. See you next time!</p>
        </article>
      </article>

      <aside class="aside">
        <h4>Related posts</h4>

        <ul class="related">
          <li class="related-post">
            <img
              src="img/related-1.jpg"
              alt="someone is coding"
              width="75"
              height="75"
            />

            <div>
              <a href="#" class="related-link">How to Learn Web Development</a>

              <p class="related-author">By Jonas Schmedtmann</p>
            </div>
          </li>

          <li class="related-post">
            <img
              src="/img/related-2.jpg"
              alt="lightening"
              width="75"
              height="75"
            />

            <div>
              <a href="#" class="related-link">The Unknown Powers of CSS</a>

              <p class="related-author">By Jim Dillon</p>
            </div>
          </li>

          <li class="related-post">
            <img
              src="img/related-3.jpg"
              alt="some codes on a screen"
              width="75"
              height="75"
            />

            <div>
              <a href="#" class="related-link">Why JavaScript is Awesome</a>

              <p class="related-author">By Matilda</p>
            </div>
          </li>
        </ul>
      </aside>
      <!-- </div> -->

      <footer>
        <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
      </footer>
    </div>
  </body>
</html>
